<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title id="title">帮助</title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/mammoth/1.3.1/mammoth.browser.min.js"></script>
		<style type="text/css">
			#example img{
				max-width:100%;
			}
		</style>
	</head>

	<body>
		<div id="example">
		</div>
		<script>
			function preview() {
				axios({
					method: 'get',
					url: 'helpWeapp.docx',
					responseType: 'arraybuffer'
				}).then(res => {
					if(res.status == 200) {
						console.log('res.data', res.data)
						//将文件转成arrayBuffer格式
						var arrayBuffer = res.data
						mammoth.convertToHtml({
								arrayBuffer: arrayBuffer
							})
							.then((res) => {
								document.getElementById('example').innerHTML = res.value
								let obj = document.getElementById('example').children
								//动态修改样式
								for(let i = 0; i < obj.length; i++) {
									obj[i].style.color = "#333"
								}
							}).done();
					}
				}).catch(e => {
					console.log(e)
				})
			}
			preview()
		</script>
	</body>

</html>